<template>
  <!-- 导航栏 -->
  <navbarback></navbarback>
  <view class="viewpoint">
    <view class="content">
      <scroll-view scroll-y>
        <view style="display: flex; flex-wrap: wrap; width: 100%">
          <!-- 信息条 -->
          <view class="item" @tap="text">
            <text>姓名：</text><text>{{ userform.name }}</text>
          </view>
          <view class="item" style="width: 300rpx !important">
            <text>身份证：</text><text>{{ userform.idNumber }}</text>
          </view>
          <view class="item">
            <text>性别：</text><text>{{ userform.sex }}</text>
          </view>
          <view class="item">
            <text>联系电话：</text><text>{{ userform.phoneNumber }}</text>
          </view>
          <view class="item" style="width: 100%">
            <text>地址：</text><text>{{ userform.address }}</text>
          </view>
          <view class="item">
            <text>签约医生：</text><text>{{ MemberStore.profile.doctorInfo.name }}</text>
          </view>
          <view class="item" style="width: 300rpx !important">
            <text>开始时间：</text><text>{{ time }}</text>
          </view>
          <view
            style="
              width: 300rpx !important ;
              height: 50rpx;
              display: flex;
              line-height: 50rpx;
              font-size: 16rpx;
            "
          >
            <text>签约年限：</text
            ><radio-group @change="ongenderChange">
              <label class="radio">
                <radio value="1年" color="#27ba9b" :checked="userform.signyear === '1年'" />
                1年
              </label>
              <label class="radio">
                <radio value="2年" color="#27ba9b" :checked="userform.signyear === '2年'" />
                2年
              </label>
            </radio-group>
          </view>
        </view>
        <view class="signnanme" v-if="signimg.length != 0">
          <text>签名：</text>
          <image style="height: 100rpx; width: 200rpx" :src="signimg" mode="scaleToFill" />
        </view>
        <!-- 签字版 -->
        <view style="width: 70%" v-if="signimg.length == 0">
          <signup @input="getText"></signup>
        </view>
        <view class="button" v-if="signimg.length != 0">
          <view @tap="sign_next" class="next">确认签约</view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
import navbarback from '@/component/navbarback.vue'
import { useMemberStore } from '../../stores/index'
import { formatTime } from '../../utils/time'
import signup from '@/component/signup.vue'
import { baseURL } from '@/utils/http'
import { Signing } from '@/services/sign'
//接收页面传递参数
const query = defineProps<{ param1: any }>()
const userform = ref()
const MemberStore = useMemberStore()
userform.value = JSON.parse(query.param1)
const time = formatTime(new Date())
const text = () => {
  uni.uploadFile({
    url: baseURL + '/upload',
    filePath: '_doc/uniapp_temp_1709735789480/canvas/17097359474570.png',
    name: 'image',
    success: (uploadFileRes: any) => {
      let path = JSON.parse(uploadFileRes.data)
      console.log(path)
    },
  })
}
//签名图片
const signimg = ref('')
const getText = (val: any) => {
  signimg.value = val.data
}
//确认签约
const signform = ref({
  idNumber: '',
  doctorId: 0,
  signYears: 1,
})
// 子给父传需要defineEmits 派发
const emit = defineEmits(['on-click'])
const sign_next = async () => {
  signform.value.idNumber = userform.value.idNumber
  signform.value.doctorId = MemberStore.profile.doctorInfo.id
  if (userform.value.signyear == '1年') {
    signform.value.signYears = 1
  }
  if (userform.value.signyear == '2年') {
    signform.value.signYears = 2
  }
  const res = await Signing(signform.value)
  if (res.code == 200) {
    uni.showToast({ icon: 'none', title: '签约成功' })
    uni.navigateBack({ delta: 1 })
  }
}
const ongenderChange = (ev: any) => {
  userform.value.signyear = ev.data.value
}
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #f4f4f4;
}
.viewpoint {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 50rpx);
  padding: 10rpx 5rpx;
  width: 100%;
  .content {
    width: 100%;
    height: 100%;
    border: 1rpx solid #ccc;
    border-radius: 5rpx;
    box-shadow: 1rpx 1rpx 2rpx 1rpx rgba(0, 0, 0, 0.1);
    padding: 20rpx 40rpx;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    .button {
      height: 50rpx;
      width: 100%;
      // background-color: #1ab1ff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      // margin-top: 10rpx;
      .save_btn,
      .next {
        height: 40rpx;
        width: 100rpx;
        background-color: #1ab1ff;
        color: #fff;
        text-align: center;
        line-height: 40rpx;
        font-weight: bold;
        border-radius: 10rpx;
        font-size: 16rpx;
      }
    }
    .signnanme {
      height: 100rpx;
      width: 100%;
      line-height: 30rpx;
      color: #242121;
      font-size: 16rpx;
    }
    .item {
      height: 50rpx;
      width: 200rpx;
      text-align: left;
      line-height: 50rpx;
      color: #242121;
      font-size: 16rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
}
</style>